import React, { Component } from 'react'
import { InputItem } from 'antd-mobile'
import { NavHeader } from '../common'

export default class RechargePage extends Component {
  constructor() {
    super()
    this.state = {
      payment: '',
    }
  }
  render() {
    const { payment } = this.state
    return (
      <div className={`rt-recharge-page-container cm-column-flex-box`}>
        <NavHeader title="充值" />
        <div className={`rt-cue-message`}>充值时间为工作日8点至次日6点</div>

        <div className={`cm-scrollable-container`}>
          <div className={`rt-balance-box`}>账户余额：3,686.90元</div>
          <section className={`rt-payment-box`}>
            <span>选择支付方式：</span>
            <div className={`rt-wrapper-box`}>
              {
                ['wechat', 'online'].map(v => (
                  <div
                    className={`${payment === v ? '-selected' : ''}`}
                    onClick={() => {
                      let p = v
                      if (payment === v) {
                        p = ''
                      }
                      this.setState({
                        payment: p,
                      })
                    }}
                  >
                    <img alt="wechat" src={require('static/images/wechat.png')} />
                    {
                      payment === v
                      ? (
                        <div className={`cm-right-angle-trangle-box`}>
                          <div className={`cm-tick-box`}></div>
                        </div>
                      )
                      : null
                    }
                  </div>
                ))
              }
            </div>
          </section>

          <InputItem
            className={`cm-input-item`}
            placeholder="请输入充值金额（大于0.02）"
            extra="元"
          />

          <div className={`cm-main-button`}>下一步</div>

          <div className={`rt-next-step-tip`}>页面将跳转至支付平台安全支付网页，支付完成后将返回</div>
        </div>

      </div>
    )
  }
}